<!--  用户列表组件-->
<template>
    <div class='user-list'>
        <!-- 导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 权限设置
        1.按钮级别 - 通过按钮来实现某些内容的显示和隐藏
        2.元素级别 - 根据不同的元素来设置不同的展示效果 v-if v-show
        3.页面级别 - 根据后台传递过来的数据呈现不同的页面内容
        -->
        <el-card class="box-card" v-if="userListDatas">
            <!-- 
            v-model="activeName":活性的名称
            @tab-click:点击tab切换的事件
            name与选项卡绑定值 value 对应的标识符，
            -->
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <el-tab-pane :label="userLevelData.title" :name="userLevelData.title"
                    v-for="userLevelData in userLevelDatas" :key="userLevelData.id">
                    {{ userLevelData.title }}
                </el-tab-pane>
            </el-tabs>
            <!-- 表格 -->
            <!-- :data:绑定table的所有数据
              prop属性的属性值与传递的数据进行匹配
            -->
            <el-table :data="userListDatas" border style="width: 100%">
                <el-table-column fixed prop="id" label="ID" width="150">
                </el-table-column>
                <el-table-column prop="username" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="120">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="150">
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="120">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="120">
                </el-table-column>
                <el-table-column prop="imgsrc" label="头像" width="120">
                    <template slot-scope="scope">
                        <!-- 标准化开发 -->
                        <img :src="Setting.baseURL + scope.row.imgsrc" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="用户等级" width="120">
                </el-table-column>
                <el-table-column prop="address" label="地址" width="120">
                </el-table-column>
                <el-table-column prop="is_show" label="是否显示" width="120">
                    <!-- 通过人家的插槽 -->
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.is_show" active-text="可" inactive-text="否" active-value="1">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleEditClick(scope.row)" type="primary" size="small">编辑</el-button>
                        <el-button @click="handleDelClick(scope.row)" type="danger" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[5, 10, 15, 20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
                :total="count">
            </el-pagination>
            <!-- 编辑对话框 -->
            <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible">
                <!-- 绑定到form表单上 -->
                <el-form :model="editForm" :rules="editRules" ref="editRuleForm">
                    <el-form-item label="年龄" label-width="120px" prop="age">
                        <el-input v-model.number="editForm.age" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" label-width="120px" prop="email">
                        <el-input v-model="editForm.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" label-width="120px" prop="address">
                        <el-input v-model="editForm.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否显示" label-width="120px" prop="is_show">
                        <el-switch v-model="editForm.is_show" active-text="可" inactive-text="否" active-value="1">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitEditForm('editRuleForm')">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { UserListApi, UserDeleApi, UserEditApi } from '@/api/user'
import Setting from '@/utils/setting'
import validateReg from '@/utils/validateReg'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        var validateEmail = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入邮箱'));
            } else {
                if (!validateReg.regEmail.test(value)) {
                    callback(new Error('请输入正确的邮箱'));
                }
                callback();
            }
        };
        //这里存放数据
        return {
            page: 1,
            size: 5,
            level: '0',
            userListDatas: null,
            Setting,
            count: 0,
            userLevelDatas: [
                { id: 1, title: '全部用户', level: '0' },
                { id: 2, title: '管理员', level: '1' },
                { id: 3, title: '普通用户', level: '2' },
                { id: 4, title: 'VIP用户', level: '3' },
                { id: 5, title: '游客', level: '4' },
            ],
            activeName: '全部用户',
            dialogFormVisible: false,
            editForm: {
                age: '',
                email: '',
                address: '',
                is_show: ''
            },
            editRules: {
                age: [
                    { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
                ],
                email: [
                    { required: true, validator: validateEmail, trigger: 'blur' }
                ],
            }
        };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 修改
        handleEditClick(editInfo) {
            console.log('编辑');
            // 打开编辑对话框
            this.dialogFormVisible = true;
            console.log(editInfo);
            this.editForm = editInfo;
        },
        // 删除事件
        handleDelClick(rowData) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // console.log(rowData);
                UserDeleApi({ id: rowData.id }).then(res => {
                    // console.log(res.data);
                    if (res.data.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        // 请求后台数据
                        this.getUserListDatas()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 获取用户数据
        getUserListDatas() {
            UserListApi({
                page: this.page,
                size: this.size,
                level: this.level
            }).then(
                res => {
                    console.log(res.data);
                    this.userListDatas = res.data.data;
                    // 获取所有数据的条数
                    this.count = res.data.count
                }
            )
        },
        // 修改页面的size事件
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            // 修改size
            this.size = val;
            // 请求后台数据
            this.getUserListDatas()

        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            // 修改page
            this.page = val;
            // 请求后台数据
            this.getUserListDatas()
        },
        // tab切换的事件
        handleTabClick(tab) {
            console.log('点击切换');
            console.log(tab);
            this.level = this.userLevelDatas[tab.index].level;
            // 再次请求数据
            this.getUserListDatas()
        },
        submitEditForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.editForm);
                    if (this.editForm.is_show == false) {
                        this.editForm.is_show = '0';
                    } else {
                        this.editForm.is_show = '1';
                    }
                    UserEditApi(this.editForm).then(res => {
                        if (res.data.status == 200) {
                            // 提示信息
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 再次请求最新数据,更新表格中的数据
                            this.getUserListDatas()
                        } else {
                            this.$message(res.data.msg);
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getUserListDatas()
    },
    beforeMount() { }, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，激活
    deactivated() { }, //如果页面有keep-alive缓存功能，非激活
}
</script>
<style lang="less">

</style>